<template>
  <div>
    <img class="login-container" src="../assets/images/login.png"/>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <h3 class="title">后台管理系统</h3>
      <el-form-item prop="username">
        <img src="../assets/images/userIcon.png" alt="user">
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入用户名"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item prop="password">
        <img src="../assets/images/passwordIcon.png" alt="password">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <i :class="passwordType === 'password' ? 'el-icon-error' : 'el-icon-remove'"></i>
        </span>
      </el-form-item>
      （随意用户名密码即可登录）
      <!-- <el-form-item prop="verificationCode" id="verificationCode">
        <el-input
          ref="verificationCode"
          v-model="loginForm.verificationCode"
          placeholder="请输入验证码"
          name="verificationCode"
          type="text"
          tabindex="3"
          maxlength="4"
          @keyup.enter.native="handleLogin"
        />
        <img id="checkMa" @click="changeCheckCode" :src="imgSrc" alt="checkMa" />
      </el-form-item> -->
      <el-button :loading="loading" type="primary" id="login" @click.native.prevent="handleLogin">登 录</el-button>
    </el-form>
  </div>
</template>

<script>
  import {setUser} from '@/api/session';
  import {Message} from 'element-ui'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value==="" || value===null || value===undefined) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value==="" || value===null || value===undefined) {
        callback(new Error('密码不能为空'))
      }else if(value.length < 6) {
        callback(new Error('密码长度不能小于6位'));
      }
      else {
        callback()
      }
    };
    const validateVerificationCode = (rule, value, callback) => {
      if (value==="" || value===null || value===undefined) {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    };
    return {
      loginForm: {
        username: '',
        password: '',
        verificationCode:''//文本框输入的验证码
      },
      // imgSrc:baseUrl+'kaptcha',
      verificationCodeList:[],//数字字母组合
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    //更新验证码
    changeCheckCode(){
      //this.imgSrc=baseUrl+"kaptcha?n="+new Date().getTime();
    },
    // 密码的显示与否
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 点击登录
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
            let that=this;
            //模拟用户
            let user = {
              userName: that.loginForm.username.trim(),
              password: that.loginForm.password,
            }
            setUser(user)
            that.$router.push("/user")
           
          }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100%;
  width: 100%;
position: fixed;
top: 0;
left: 0;
}
.el-form{
  position: fixed;
  top:50%;
  right:50%;
  width:400px;
  height:400px;
  margin-top:-200px;
  margin-right:-200px;
  background: rgba(225,225,225,0.2);
  border-radius: 10px;
}
.title{
  width:100%;
  text-align: center;
  font:400 28px Microsoft YaHei;
  color:rgba(255,255,255,.9);
  margin:30px 0;
}
.el-form-item{
  position: relative;
  height:46px;
  line-height: 46px;
  margin-bottom:26px;
}
.el-form-item .el-input{
  position: absolute;
  left:10%;
  width:80%;
}
.el-form-item img{
  position: absolute;
  left:12%;
  z-index: 2;
  width:16px;
  height:20px;
  top:10px;
}
.show-pwd{
  position: absolute;
  right:14%;
}
.el-form-item >>> .el-input__inner{
  padding:0 30px;
}
.el-form-item  >>> .el-form-item__error{
  color: #F56C6C;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  top: 46px;
  left: 12%;
  z-index: 2;
}
#verificationCode >>> .el-form-item__content{
  position: relative;
  width:100%;
  height:46px;
  vertical-align: middle;
}
#verificationCode .el-input{
  width:50%;
}
#verificationCode  >>> .el-input__inner{
  padding:0 10px;
}
#verificationCode >>> .el-form-item__content #checkMa{
  position: absolute;
  left: 62%;
  top: 0;
  width:110px;
  height:40px;
  border-radius: 4px;
  display:inline-block;

}
.el-form  #login{
  width:80%;
  margin-left:10%;
}

</style>
